<template>
  <!-- MyOrder 我的订单  -->
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab">
        <Header title="我的订单" :is-box-shadow="false">
          <CapsuleTabs v-model:current="capsuleTabsCurrent" :list="capsuleTabsList" @change="handleCapsuleTabsChange" />
          <TabNav tabBarColor="#2878FF" />
        </Header>
        <TabsItem name="全部订单" :value="'all'"></TabsItem>
        <TabsItem name="待支付" :value="0"></TabsItem>
        <TabsItem name="服务中" :value="3"></TabsItem>
        <TabsItem name="已完成" :value="1"></TabsItem>
        <TabsItem name="已取消" :value="2"></TabsItem>
      </Tabs>
      <view class="px-12 py-16">
        <Paglist
          v-model="dataList"
          :is-init-api="true"
          :parame="parames"
          @register="register"
          :is-show-loadmore="dataList.length > 1"
        >
          <template v-for="item in dataList" :key="item.id">
            <OrderItem :item="item" @refresh="refresh()" />
          </template>
        </Paglist>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  MyOrder  我的订单  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import CapsuleTabs from '@/components/CapsuleTabs/index.vue';
  import { onPageScroll } from '@dcloudio/uni-app';
  import { myOrderList } from '@/api/order';
  import { type MyOrderListData, type MyOrderListReslut } from '@/api/order/types';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { nextTick, provide, reactive, ref, watch } from 'vue';
  import OrderItem from './components/OrderItem.vue';
  import { OrderStateEnum, OrderTypeEnum } from '@/enums/orderEnum';

  const currentTab = ref<'all' | OrderStateEnum>('all');
  const capsuleTabsCurrent = ref(0)

  const capsuleTabsList = ['活动订单', '人脉订单', '会费订单'];
  function handleCapsuleTabsChange(index: number) {
    switch (index) {
      case 0:
        parames.orderTypeList = [OrderTypeEnum.ACTIVITY_PAY];
        break;
      case 1:
        parames.orderTypeList = [OrderTypeEnum.UNLOCK_BUSINESS_CARD, OrderTypeEnum.SECRETARIAT];
        break;
      case 2:
        parames.orderTypeList = [OrderTypeEnum.MEMBER_FEES];
        break;
    }
    dataList.value = [];
    nextTick(() => refresh?.());
  }

  const parames = reactive<Partial<MyOrderListData>>({
    orderState: void 0,
    orderTypeList: [OrderTypeEnum.ACTIVITY_PAY],
  });

  provide('api', myOrderList);

  const dataList = ref<MyOrderListReslut[]>([]);
  const [register, { refresh }] = useConList();

  watch(currentTab, (val) => {
    parames.orderState = val === 'all' ? undefined : (val as OrderStateEnum);
    dataList.value = [];
    nextTick(() => refresh?.());
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped></style>
